<script setup>
import { ref, watch } from 'vue'
import ProForm from '../ProForm/index.vue'

const props = defineProps({
  visible: Boolean,
  title: String,
  fullscreen: Boolean,
  showClose: {
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '新增'
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true
  },

  formData: Object,
  formColumn: Array,
  formRules: Object,
  formAttr: {
    type: Object,
    default: () => ({
      labelWidth: '80px'
    })
  },
  rowLayout: {
    type: Object,
    default: () => ({
      gutter: 20
    })
  },
  beforeClose: {
    type: Function,
    default: () => {}
  }
})

const emit = defineEmits(['update:visible', 'update:formData', 'cancel', 'confirm', 'open', 'opened', 'close', 'closed'])

// 由于传递给当前组件了，所以formData就成为当前组件的本地数据，再传到proForm组件就无法监听到改变了
const FD = ref(props.formData)
watch(() => props.formData, newVal => {
  FD.value = newVal
}, { deep: true })
watch(FD, newVal => {
  emit('update:formData', newVal)
}, { deep: true })

const v = ref(props.visible)
watch(() => props.visible, newVal => {
  v.value = newVal
})

const isFullScreen = ref(props.fullscreen || false)

const proFormRef = ref(null)

// 点击取消按钮
const handleCancel = () => {
  emit('cancel')

  proFormRef.value.formRef.clearValidate()
  proFormRef.value.formRef.resetFields()
}
// 点击确认按钮
const handleConfirm = async () => {
  await proFormRef.value.formRef.validate((valid) => {
    if (valid) {
      emit('confirm')
    }
  })
}
const handleOpen = () => {
  emit('open')
}
const handleOpened = () => {
  emit('opened')
}
const handleClose = () => {
  if(v.value){
    return emit('update:visible', false)
  }
  if (props.beforeClose && typeof props.beforeClose === 'function') {
    props.beforeClose()
  }

  emit('close')
  
  proFormRef.value.formRef.clearValidate()
  proFormRef.value.formRef.resetFields()
}
const handleClosed = () => {
  emit('closed')
}

defineExpose({
  proFormRef
})
</script>

<template>
  <el-dialog
    :visible.sync="v"
    v-bind="$attrs"
    :fullscreen="isFullScreen"
    :before-close="handleClose"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed">
    <template #title>
      <div class="title-container">
        <span>{{ title }}</span>
        <div class="tc-operation">
          <i class="el-icon-full-screen" @click="isFullScreen = !isFullScreen"></i>
          <i class="el-icon-close" v-if="showClose" @click="handleClose"></i>
        </div>
      </div>
    </template>
    <pro-form
      ref="proFormRef"
      :form-data="FD"
      :form-column="formColumn"
      :row-layout="rowLayout"
      :form-attr="formAttr"
      :form-rules="formRules"></pro-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ cancelText }}</el-button>
      <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
    </span>
  </el-dialog>
</template>

<style lang="scss" scoped>
.title-container{
  display: flex;
  justify-content: space-between;
  .tc-operation{
    background-color: #fff;
    >i{
      cursor: pointer;
      margin-left: 1rem;
      font-weight: 700;
    }
  }
}

::v-deep .el-dialog__header{
  >button{
    display: none;
  }
}
</style>
